<template>
	<div class="index rowBS">
		<div class="flex-1 tabs-box">
			<div class="name pt-1 pb-1 rowSC"><el-icon><Discount /></el-icon>{{ title }}</div>
			<div class="tabs" v-for="(item, index) in tabList" :key="index" :style="{ borderColor: current === index ? '#1f6fe4' : '#b4b4b4'}" @click="tabClick(index)">
			<!-- 	<video
				  :id="`monitor${index}`"
				  class="myWebRtcVideoClass"
				  muted
				  :controls="false"
				  style="width: 100%; height: 100%; object-fit: fill"
				></video> -->
			</div>
		</div>
		<div class="monitoring">
			<video
			  id="monitor"
			  class="myWebRtcVideoClass"
			  muted
			  :controls="false"
			  style="width: 100%; height: 100%; object-fit: fill"
			></video>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import {
		reactive,
		ref,
		watch,
		onMounted,
		computed
	} from "vue"
	import {
		getStationList
	} from '@/api/RoadGate'
	import AMapLoader from '@amap/amap-jsapi-loader';
	import {
		useStore
	} from "vuex";

	const defaultProps = {
		children: 'children',
		label: 'site',
	}
	const title = ref < string > (window.site)
	const filterText = ref < string > ('')
	const treeRef = ref < InstanceType < typeof ElTree >> ()
	const store = useStore()
	const current = ref < number > (0)
	
	const refresh = computed(() => store.state.refresh) // 当前故障状态
	watch(refresh, () => {
		console.log('window.site', window.site)
		title.value = window.site
	}, {
		immediate: true
	})

	const treeData = ref < any > ([])

	const tabList = reactive < any > ([{
			name: '视频1',
			key: 1,
			url: 'rtsp://218.204.251.243:1167/04843228524665210101?DstCode=01&ServiceType=1&ClientType=1&StreamID=1&SrcTP=2&DstTP=2&SrcPP=2&DstPP=1&MediaTransMode=0&BroadcastType=0&SV=0&Token=txSCs1gGdh+9KjbZawV72vhKcBhG4kOqdBBJkf2CIwE=&DomainCode=e414794f59754ca59e2993ae0a69c77d&UserId=2&'
		},
		{
			name: '视频2',
			key: 2,
			url: 'rtsp://218.204.251.243:1167/04843228524665210101?DstCode=01&ServiceType=1&ClientType=1&StreamID=1&SrcTP=2&DstTP=2&SrcPP=2&DstPP=1&MediaTransMode=0&BroadcastType=0&SV=0&Token=zEPKnkP/NP64/FToyCEJVrekhDrPrRy2u4ZRJPDpsGw=&DomainCode=e414794f59754ca59e2993ae0a69c77d&UserId=2&'
		},
		{
			name: '视频3',
			key: 3,
			url: 'rtsp://218.204.251.243:1167/04843228524665210101?DstCode=01&ServiceType=1&ClientType=1&StreamID=1&SrcTP=2&DstTP=2&SrcPP=2&DstPP=1&MediaTransMode=0&BroadcastType=0&SV=0&Token=jhIRTc1do2dV5wMthYJJsKX93/QGOigLFYQGJXbA4fs=&DomainCode=e414794f59754ca59e2993ae0a69c77d&UserId=2&'
		},
		{
			name: '视频4',
			key: 4,
			url: 'rtsp://218.204.251.243:1167/04843228524665210101?DstCode=01&ServiceType=1&ClientType=1&StreamID=1&SrcTP=2&DstTP=2&SrcPP=2&DstPP=1&MediaTransMode=0&BroadcastType=0&SV=0&Token=O1ABAO4ZvwTmVi5tAWu9SO6NFH1MYJ33gF8yJVLlyVI=&DomainCode=e414794f59754ca59e2993ae0a69c77d&UserId=2&'
		}
	])

	onMounted(async () => {
		// init()
	})
	
	const webRtcServer = ref()
	
	const init = () => {
		webRtcServer.value = new window.WebRtcStreamer(`monitor`, "http://localhost:8000")
		// webRtcServer.value.disconnect(); //关闭视频webRtcServer服务
		webRtcServer.value.connect(tabList[0].url, null, 'rtptransport=tcp')
		// console.log('webRtcServer.value', webRtcServer.value)
		
		// tabList.forEach((c: any, i: number) => {
		// 	// webRtcServer.value = new window.WebRtcStreamer("monitor", "http://14.18.109.153:8080")
		// 	webRtcServer.value = new window.WebRtcStreamer(`monitor${i}`, "http://localhost:8000")
		// 	// webRtcServer.value.disconnect(); //关闭视频webRtcServer服务
		// 	webRtcServer.value.connect(c.url, null, 'rtptransport=tcp')
		// 	console.log('webRtcServer.value', webRtcServer.value)
		// })
	}
	
	const tabClick = (e: number) => {
		current.value = e
	}

	watch(filterText, (val) => {
		treeRef.value!.filter(val)
	})
	
</script>

<style scoped lang="scss">
	.index {
		color: #d9d9d9;
		.tabs-box {
			height: 440px;
			overflow: auto;
			.name {
				font-size: 12px;
				font-weight: 400;
			}
		}
		.tabs {
			background-color: #a3a3a3;
			width: 88px;
			height: 78px;
			margin: 6px;
			border: 4px solid;
			border-radius: 5px;
		}
		
		.monitoring {
			// background: #dddddd;
			flex: 5;
			height: 440px;
		}
	}
</style>
